<template>
  <div class="personInfo">
    <el-avatar :size="80" :src="avatar" />
    <em class="personalName">{{ username }}</em>
    <div class="btnbox">
      <a class="manageBtn" @click.prevent="routerlinkHandle" data-componentName="Personal">
        账号管理
      </a>
    </div>
  </div>
</template>

<script setup>
import { ref, defineEmits, onMounted } from 'vue'

// 加载user模块 以及底下变量
import { storeToRefs } from 'pinia'
import useStore from '@/store'
const { user } = useStore()
let { username, avatar } = storeToRefs(user)

// 定义上抛事件
const emit = defineEmits(['funcJump'])

onMounted(() => {
  // console.log(username.value, avatar.value);
})

function routerlinkHandle(e) {
  let componentname = e.currentTarget.dataset.componentname
  emit('funcJump', componentname)
}
</script>

<style scoped>
.personInfo {
  width: 100%;
  height: 165px;
  background: url(@/assets/images/index/personalBg.jpg) no-repeat #faf7f5 bottom center;
  padding-top: 15px;
  text-align: center;
}

.personalName {
  display: block;
  font-size: 18px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  overflow: hidden;
  word-break: keep-all;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.btnbox {
  display: flex;
  width: 100%;
  justify-content: center;
}

.manageBtn {
  display: inline-block;
  padding: 0 20px;
  height: 26px;
  border-radius: 20px;
  line-height: 26px;
  color: #faa046;
  font-size: 14px;
  border: 1px solid #faa046;
  cursor: pointer;
}
</style>
